Поддержка языков в стилях счетчиков CSS: форматирование для международной аудитории

В современном глобально связанном мире веб-разработчикам необходимо создавать веб-сайты и приложения, ориентированные на разнообразную аудиторию. Это означает учет не только языка, но и культурных соглашений и систем нумерации, используемых в разных регионах. Стили счетчиков CSS предоставляют мощный механизм для форматирования списков и другого пронумерованного контента таким образом, чтобы уважать эти культурные нюансы. Это всеобъемлющее руководство рассмотрит возможности стилей счетчиков CSS для интернационализации (i18n) и продемонстрирует, как их эффективно использовать.

Понимание стилей счетчиков CSS

Счетчики CSS — это переменные, поддерживаемые правилами CSS для отслеживания количества их использований. Они в основном используются для нумерации списков, заголовков и других элементов. Стили счетчиков CSS расширяют эту функциональность, позволяя определять пользовательские системы нумерации, выходящие за рамки стандартных арабских и римских цифр. Это имеет решающее значение для поддержки различных языков и культурных предпочтений.

Основные свойства CSS, используемые в стилях счетчиков:

• counter-reset: Инициализирует или сбрасывает счетчик до определенного значения.
• counter-increment: Увеличивает значение счетчика.
• content: Используется с псевдоэлементами ::before или ::after для отображения значения счетчика.
• counter() или counters(): Функции, используемые внутри свойства content для форматирования значения счетчика.
• @counter-style: Определяет пользовательский стиль счетчика с различными свойствами для управления форматированием.

Сила @counter-style

Правило @counter-style является ядром интернационализации стилей счетчиков CSS. Оно позволяет определить пользовательскую систему нумерации с различными свойствами, которые управляют отображением значения счетчика. Давайте рассмотрим ключевые свойства внутри правила @counter-style:

• system: Определяет алгоритм, используемый для генерации представления счетчика. Общие значения включают cyclic, numeric, alphabetic, symbolic, fixed и additive.
• symbols: Определяет символы, используемые стилем счетчика, такие как числа, буквы или пользовательские символы.
• additive-symbols: Используется с системой additive для определения символов и их соответствующих числовых значений.
• suffix: Определяет текст, добавляемый после каждого представления счетчика (например, точка или закрывающая скобка).
• prefix: Определяет текст, добавляемый перед каждым представлением счетчика.
• range: Ограничивает диапазон значений, для которых применим стиль счетчика.
• pad: Определяет минимальное количество используемых цифр, при необходимости заполняя ведущими нулями.
• speak-as: Управляет тем, как значение счетчика объявляется программами чтения с экрана для обеспечения доступности.
• fallback: Определяет резервный стиль счетчика, который будет использоваться, если текущий стиль не поддерживается браузером.

Примеры интернационализации с @counter-style

Теперь давайте рассмотрим несколько практических примеров использования @counter-style для форматирования счетчиков для разных языков и культурных контекстов.

1. Арабские цифры с арабско-индийскими цифрами

Хотя арабские цифры (0-9) широко используются, многие арабоязычные регионы предпочитают использовать арабско-индийские цифры (٠‎-٩‎). Мы можем создать стиль счетчика для достижения этой цели:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Этот код определяет стиль счетчика с именем arabic-indic, который использует арабско-индийские цифры в качестве символов. Свойство suffix добавляет точку и пробел после каждого числа. Затем CSS применяет этот стиль к упорядоченному списку (<ol>), чтобы отображать числа в арабско-индийском формате.

2. Римские цифры (верхний и нижний регистр)

Римские цифры обычно используются в различных контекстах, и стили счетчиков CSS могут легко обрабатывать их:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Этот пример демонстрирует, как создать стили счетчиков римских цифр как в верхнем (upper-roman), так и в нижнем (lower-roman) регистре. Затем вы можете применить эти стили к разным спискам, используя классы CSS (.upper-roman и .lower-roman). Например:

<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3. Грузинские цифры

В грузинских цифрах используется уникальная система букв. Мы можем определить стиль счетчика для представления чисел на грузинском языке:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

В этом примере используется система fixed, потому что в грузинской системе нумерации есть ограниченный набор символов для первых 33 чисел. Свойство range ограничивает стиль счетчика значениями от 1 до 33. Для чисел больше 33 вам потребуется реализовать более сложную логику или другую систему нумерации.

4. Армянские цифры

Подобно грузинским, армянские цифры также используют буквы для представления чисел:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Этот пример похож на грузинский пример, использующий систему fixed и определяющий армянские буквы в качестве символов. range установлен на 1-39, охватывая основной армянский набор цифр.

5. Цифры CJK (китайский, японский, корейский)

Цифры CJK предлагают большую сложность, с различными формами для формального и неформального контекстов и различными уровнями детализации. Давайте посмотрим на упрощенный китайский:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Обратите внимание, что это упрощенное представление. Полная поддержка цифр CJK, особенно для больших чисел, потребует более сложной реализации с использованием системы additive и обработки разрядов (десятки, сотни, тысячи и т. д.). Этот код демонстрирует базовое представление чисел.

Продвинутые техники и соображения

1. Объединение стилей счетчиков

Вы можете объединить несколько стилей счетчиков для создания более сложных схем нумерации. Например, вы можете использовать основной счетчик для глав и вторичный счетчик для разделов в каждой главе.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

Этот код создает иерархическую систему нумерации, в которой главы нумеруются последовательно, а разделы нумеруются внутри каждой главы (например, 1.1, 1.2, 2.1, 2.2).

2. Соображения доступности

Убедитесь, что ваши стили счетчиков доступны для пользователей с ограниченными возможностями. Используйте свойство speak-as, чтобы контролировать, как значение счетчика объявляется программами чтения с экрана. Например:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

Свойство speak-as: numbers; сообщает программе чтения с экрана, чтобы она объявляла значение счетчика как число. Другие варианты включают spell-out (для произнесения числа по буквам) и bullets (для объявления счетчика как маркеров).

Кроме того, предоставьте альтернативный текст или описания для любых пользовательских символов, используемых в ваших стилях счетчиков, чтобы пользователи с нарушениями зрения могли понять значение пронумерованного контента.

3. Совместимость с браузерами

Хотя стили счетчиков CSS широко поддерживаются современными браузерами, важно учитывать старые версии браузеров. Используйте свойство fallback, чтобы указать резервный стиль счетчика, который будет использоваться, если браузер не поддерживает основной стиль. Например:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

В этом примере, если браузер не поддерживает систему cyclic или пользовательские символы, он вернется к стилю списка disc.

4. Культурная чувствительность

При реализации стилей счетчиков для разных языков и культур помните о культурной чувствительности. Изучите соответствующие соглашения о нумерации и символы, используемые в каждом регионе. Избегайте использования символов или форматов, которые могут быть оскорбительными или неуместными.

Например, некоторые культуры могут предпочитать использовать другие знаки препинания или разделители в своих системах нумерации. Убедитесь, что ваши стили счетчиков учитывают эти предпочтения.

Практические применения и варианты использования

Стили счетчиков CSS можно использовать в самых разных сценариях веб-разработки, в том числе:

• Создание оглавлений: Автоматически нумеровать заголовки и подзаголовки в оглавлении.
• Создание нумерованных списков: Форматировать нумерованные списки на разных языках и в разных стилях.
• Нумерация шагов в учебнике: Проводить пользователей по серии шагов с четкой и визуально привлекательной нумерацией.
• Реализация пользовательской пагинации: Создавать пользовательские элементы управления пагинацией с уникальными схемами нумерации.
• Отображение рейтинговых списков: Показывать рейтинги в визуально привлекательной форме, используя различные стили счетчиков.
• Создание юридических документов: Форматировать юридические документы с особыми требованиями к нумерации.
• Форматирование научных работ: Отображать уравнения, рисунки и таблицы с соответствующей нумерацией.

Рекомендации по использованию стилей счетчиков CSS

Чтобы ваши стили счетчиков CSS были эффективными и поддерживаемыми, следуйте этим рекомендациям:

• Используйте описательные имена для своих стилей счетчиков: Выбирайте имена, которые четко указывают цель и форматирование стиля (например, arabic-indic, upper-roman, georgian).
• Сделайте свои стили счетчиков модульными: Определите отдельные стили счетчиков для разных языков и систем нумерации.
• Используйте классы CSS для применения стилей счетчиков: Избегайте применения стилей счетчиков непосредственно к элементам; вместо этого используйте классы CSS для управления форматированием.
• Тщательно протестируйте свои стили счетчиков: Протестируйте свои стили счетчиков в разных браузерах и устройствах, чтобы убедиться, что они отображаются правильно.
• Задокументируйте свои стили счетчиков: Предоставьте четкую документацию для своих стилей счетчиков, включая их цель, форматирование и использование.
• Уделяйте приоритетное внимание доступности: Всегда учитывайте доступность при создании стилей счетчиков и используйте свойство speak-as, чтобы гарантировать, что значения счетчиков правильно объявляются программами чтения с экрана.

Заключение

Стили счетчиков CSS предоставляют мощный и гибкий механизм для интернационализации форматирования пронумерованного контента в Интернете. Используя правило @counter-style и его различные свойства, вы можете создавать пользовательские системы нумерации, которые учитывают культурные соглашения и лингвистические нюансы разных регионов. Следуя рекомендациям, изложенным в этом руководстве, вы можете гарантировать, что ваши стили счетчиков будут эффективными, поддерживаемыми и доступными для глобальной аудитории. Поскольку веб-разработка продолжает развиваться, понимание и использование стилей счетчиков CSS для интернационализации будет становиться все более важным для создания действительно инклюзивного и удобного веб-интерфейса. Воспользуйтесь мощью стилей счетчиков CSS и создавайте веб-сайты, которые находят отклик у пользователей со всех уголков мира.

Дальнейшее чтение

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles